<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 游戏收藏</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/login.css">
</head>
<body>
    <header class="header">
        <nav class="nav-container">
            <div class="nav-left">
                <div class="logo">
                    <span class="logo-text">Game Hub</span>
                </div>
                <div class="nav-links">
                    <a href="index.html">首页</a>
                    <a href="leaderboard.html">排行榜</a>
                    <a href="new-releases.html">新品推荐</a>
                    <a href="favorites.html">收藏夹</a>
                </div>
            </div>
            <div class="nav-right">
                <div class="search-container">
                    <input type="text" placeholder="搜索游戏...">
                    <button class="search-btn">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                            <path d="M21 21L16.5 16.5M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </button>
                </div>
                <button class="user-btn">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        <path d="M20 21C20 18.2386 16.4183 16 12 16C7.58172 16 4 18.2386 4 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </button>
            </div>
        </nav>
    </header>

    <main class="main">
        <!-- 主要内容 -->
        <div class="auth-container">
            <div class="auth-box">
                <!-- 标签切换 -->
                <div class="auth-tabs">
                    <button id="login-tab" class="tab-btn active">登录</button>
                    <button id="register-tab" class="tab-btn">注册</button>
                </div>

                <!-- 登录表单 -->
                <form id="login-form" class="auth-form">
                    <div class="form-group">
                        <label for="login-email">邮箱</label>
                        <input type="email" id="login-email" name="email" required placeholder="请输入邮箱">
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码</label>
                        <div class="password-input">
                            <input type="password" id="login-password" name="password" required placeholder="请输入密码">
                            <button type="button" class="toggle-password">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                            </button>
                        </div>
                    </div>
                    <div class="form-options">
                        <label class="remember-me">
                            <input type="checkbox" name="remember" checked>
                            <span>记住我</span>
                        </label>
                        <a href="#" class="forgot-password">忘记密码？</a>
                    </div>
                    <button type="submit" class="btn-primary">登录</button>
                </form>

                <!-- 注册表单 -->
                <form id="register-form" class="auth-form" style="display: none;">
                    <div class="form-group">
                        <label for="register-email">邮箱</label>
                        <input type="email" id="register-email" name="email" required placeholder="请输入邮箱">
                    </div>
                    <div class="form-group">
                        <label for="register-password">密码</label>
                        <div class="password-input">
                            <input type="password" id="register-password" name="password" required placeholder="请输入密码">
                            <button type="button" class="toggle-password">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="confirm-password">确认密码</label>
                        <div class="password-input">
                            <input type="password" id="confirm-password" name="confirmPassword" required placeholder="请再次输入密码">
                            <button type="button" class="toggle-password">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                            </button>
                        </div>
                    </div>
                    <label class="agreement-checkbox">
                        <input type="checkbox" name="agreement" required>
                        <span class="form-agreement">我已阅读并同意<a href="#">用户协议</a>和<a href="#">隐私政策</a></span>
                    </label>
                    <button type="submit" class="btn-primary">注册</button>
                </form>

                <!-- 社交登录 -->
                <div class="social-login">
                    <p>其他登录方式</p>
                    <div class="social-buttons">
                        <button type="button" class="social-btn weixin" data-platform="weixin">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                        </button>
                        <button type="button" class="social-btn qq" data-platform="qq">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-top">
                <div class="footer-brand">
                    <h3>Game Hub</h3>
                    <p>发现快乐，享受游戏</p>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>关于我们</h4>
                        <a href="#">公司介绍</a>
                        <a href="#">加入我们</a>
                        <a href="#">联系方式</a>
                    </div>
                    <div class="footer-column">
                        <h4>帮助支持</h4>
                        <a href="#">常见问题</a>
                        <a href="#">用户指南</a>
                        <a href="#">意见反馈</a>
                    </div>
                    <div class="footer-column">
                        <h4>关注我们</h4>
                        <div class="social-links">
                            <a href="#" class="social-link">微信</a>
                            <a href="#" class="social-link">微博</a>
                            <a href="#" class="social-link">抖音</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 Game Hub. All rights reserved.</p>
                <div class="footer-legal">
                    <a href="#">隐私政策</a>
                    <a href="#">用户协议</a>
                    <a href="#">免责声明</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="assets/js/login.js"></script>
</body>
</html>
